<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<%@taglib uri="daiqee.com/el-common" prefix="el" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="<%=basePath %>/resource/js/common-css-js.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="<%=basePath %>/resource/css/production-prise-huiyi8.css">
<link rel="stylesheet" type="text/css" href="<%=basePath %>/resource/css/production-prise-style.css">
<title>大旗科技有限公司-产品报价</title>
<style type="text/css">
 	img {
 		width: 99% !important;
 		height: 210px;
 	}
 	
 	.member-info p {
	 	text-overflow: ellipsis;
 		white-space: nowrap;
 	}
</style>
</head>
<body>
	<c:forEach var="supplierLv" varStatus="current" items="${supplierLv}">
	  	<div class="lanrenzhijia">
		  <div class="title cf">
		    <h2 class="fl">${supplierLv.supLvName}</h2>
		    <ul class="title-list-${current.index} title-list-style fr cf">
		      <c:forEach var="supplierClassification" items="${supplierClassification }">
		      	<li>${supplierClassification.supClassName}</li>
		      </c:forEach>
		      <p><b></b></p>
		    </ul>
		  </div>
		  <div class="product-wrap product-wrap-${current.index}">
		    <c:forEach var="supplierClassification" varStatus="currentProduct" items="${supplierClassification}">
		    		<c:choose>
					   <c:when test="${currentProduct.index == '0' }">  
					   		<div class="product show">
					   </c:when>
					   <c:otherwise> 
					        <div class="product">
					   </c:otherwise>
					</c:choose>
			     	  <ul class="cf">
			     	    <c:forEach var="supplierArchives" items="${supplierArchives}">
			     	    	<c:if test="${supplierArchives.supArchiCustomerLv == supplierLv.supLvName && supplierArchives.supArchiCustomerClass == supplierClassification.supClassName }">
			     	    		<li class="ml0">
						      		<div class="single-member effect">
								    	<div class="member-image">
								        	<img src="<%=basePath %>/resource/img/logo.png" alt="Member">
								        </div>
								        <div class="member-info">
								        	<h3>${supplierArchives.supArchiEnterpriseName}</h3>
								            <h5>${supplierArchives.supArchiLinkMan}</h5>
								            <p>
								            	<p><b>产品范围:</b>&nbsp; ${supplierArchives.supArchiProduct}<p>
								            	<p><b>联系地址:</b>&nbsp; ${supplierArchives.supArchiLinkAddress}<p>
								            	<p><b>联系方式:</b>&nbsp; ${supplierArchives.supArchiLinkPhone}<p>
								            </p>
								            <div class="social-touch">
								            	<a title="QQ联系" class="fb-touch" target="_black" href="http://wpa.qq.com/msgrd?v=3&uin=${supplierArchives.supArchiQq}&site=qq&menu=yes"></a>
								                <a title="发送邮件" class="tweet-touch" href="mailto:${supplierArchives.supArchiEmail}"></a>
								                <a title="查看产品详情" class="linkedin-touch" href="javascript:void(0)" data-supplier='${el:toJsonString(supplierArchives)}'></a>
								            </div>
								        </div>
								    </div>
						    	</li>
			     	    	</c:if>
					     </c:forEach>
				     </ul>
	   			</div>
		    </c:forEach>
		  </div>
		</div>
	</c:forEach>
	<script type="text/javascript">
		var supplierObj;
		$(function(){
			//用来存储supplier的对象的信息
			var ClassificationNumber = ${supplierClassification.size()}
			//循环赋值
			for(var num = 0;num<ClassificationNumber;num++){
				//这里必须用key:value的方式来记录值,应为事件中的num取值是取for循环走完后 num的最后一个值
				$(".title-list-"+num+" li").bind('mouseover',{key: num},function(event){
					var id = event.data.key;
					
					var liindex = $(".title-list-"+id+" li").index(this);

					$(this).addClass("on").siblings().removeClass('on');
					
					$(".product-wrap-"+id+" div.product").eq(liindex).fadeIn(150).siblings("div.product").hide();
					
					var liWidth = $(".title-list-"+id+" li").width();
					
					$(".lanrenzhijia .title-list-"+id+" p").stop(false,true).animate({"left" : liindex * liWidth + "px"},300);
					
				});
			}
			
			//设计案例hover效果
			$('.product-wrap .product li').hover(function(){
				$(this).css("border-color","#ff6600");
				$(this).find('p > a').css('color','#ff6600');
			},function(){
				$(this).css("border-color","#fafafa");
				$(this).find('p > a').css('color','#666666');
			});
		})
		
		/*
		 * 用来获取打开详细页按钮 中绑定的事件
		 * 中转,在调用打开详细页方法来创建页面
		 */
		$(".linkedin-touch").click(function(){
			var $this = $(this);
			//获取绑定的参数
	        var supplier = $this.data('supplier');
			//一个全局变量用来存储供应商信息,传递给子窗口使用
	        supplierObj = supplier;
			//调用创建页面的方法
	        openProductDetails();
		})
		
		/*
		 *打开产品详情页
		 *@param supplierId 当前供应商的编号
		 */
		function openProductDetails(){
		  openOperateWindow({
			 title: supplierObj.enterprise,
			 full: true,
			 url: "/admin/enterpriseManagement/procurementManagement/productionPrise/production-prise-details.jsp"
		  })
		}
	</script>
</body>
</html>